<template>
	<div
		class="model-warp"
		ref="modalDom"
	>
		<div
			class="model-out"
			v-cloak
		>
			<div class="model-top">
				<div class="title">{{ title || '标题' }}</div>
				<div @click="handleCancelBtnClick">关闭</div>
			</div>
			<div class="content">{{ content || '内容' }}</div>
			<div class="modal-footer">
				<a-button
					@click="handleCancelBtnClick"
					class="mr-10"
					>{{ cancelText || 'cancel咯' }}</a-button
				>
				<a-button
					type="primary"
					@click="handleOkBtnClick"
					:loading="loading"
					>{{ okText || 'ok咯' }}</a-button
				>
			</div>
		</div>
		<div class="modal-mask"></div>
	</div>
</template>

<script setup lang="ts">
import type { Props } from './index'

const { title, content, okText, cancelText, ok, cancel } = defineProps<Props>()
const loading = ref(false)
const modalDom = ref<HTMLElement>()

const handleOkBtnClick = async () => {
	const parentNode = modalDom.value?.parentNode as HTMLElement
	if (ok) {
		loading.value = true
		await ok()
		parentNode.remove()
	} else {
		parentNode.remove()
	}
}

const handleCancelBtnClick = () => {
	cancel && cancel?.()
	const parentNode = modalDom.value?.parentNode as HTMLElement
	parentNode.remove()
}
</script>

<style lang="less" scoped>
.model-warp {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	.modal-mask {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.45);
		animation: fade-in 0.3s;
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.model-out {
		padding: 20px 24px;
		background: #fff;
		border-radius: 6px;
		animation: bounce-in 0.3s;
		transform-origin: center center;
		position: relative;
		z-index: 100;
	}

	.model-top {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 16px;
			font-weight: bold;
		}
	}

	.content {
		min-width: 400px;
		padding: 15px 0;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
	}

	@keyframes bounce-in {
		0% {
			transform: scale(0.9);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
}
</style>
